import ReactDOM from 'react-dom'
import '../index.css'
// 导入本地静态资源图片
import avator from '../images/02.png'
import React from 'react'
// const state = {
//   // hot: 热度排序  time: 时间排序
//   tabs: [
//     {
//       id: 1,
//       name: '热度',
//       type: 'hot'
//     },
//     {
//       id: 2,
//       name: '时间',
//       type: 'time'
//     }
//   ],
//   active: 'hot',
//   list: [
//     {
//       id: 1,
//       author: '刘德华',
//       comment: '给我一杯忘情水',
//       time: '2021-10-10 09:09:00',
//       img: 'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000',
//       // 1: 点赞 0：无态度 -1:踩
//       attitude: 1
//     },
//     {
//       id: 2,
//       author: '周杰伦',
//       comment: '听妈妈的话',
//       time: '2021-10-11 09:09:00',
//       img: 'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
//       // 1: 点赞 0：无态度 -1:踩
//       attitude: 0
//     },
//     {
//       id: 3,
//       author: '陈奕迅',
//       comment: '十年',
//       time: '2021-10-11 10:09:00',
//       img: 'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
//       // 1: 点赞 0：无态度 -1:踩
//       attitude: -1
//     }
//   ]
// }
// 普通的渲染结构
// const element = (
//   <div className="App">
//     <div className="comment-container">
//       {/* 评论数 */}
//       <div className="comment-head">
//         <span>{state.list.length} 评论</span>
//       </div>
//       {/* 排序 */}
//       <div className="tabs-order">
//         <ul className="sort-container">
//           {state.tabs.map((item) => (
//             <li
//               className={item.type === state.active ? 'on' : ''}
//               key={item.id}>
//               按{item.name}排序
//             </li>
//           ))}
//           {/* <li className="on">按{热度}排序</li> */}
//           {/* <li>按时间排序</li> */}
//         </ul>
//       </div>

//       {/* 添加评论 */}
//       <div className="comment-send">
//         <div className="user-face">
//           <img className="user-head" src={avator} alt="" />
//         </div>
//         <div className="textarea-container">
//           <textarea
//             cols="80"
//             rows="5"
//             placeholder="发条友善的评论"
//             className="ipt-txt"
//           />
//           <button className="comment-submit">发表评论</button>
//         </div>
//         <div className="comment-emoji">
//           <i className="face" />
//           <span className="text">表情</span>
//         </div>
//       </div>

//       {/* 评论列表 */}
//       {state.list.map((item) => (
//         <div className="comment-list" key={item.id}>
//           <div className="list-item">
//             <div className="user-face">
//               <img className="user-head" src={item.img} alt="" />
//             </div>
//             <div className="comment">
//               <div className="user">{item.author}</div>
//               <p className="text">{item.comment}</p>
//               <div className="info">
//                 <span className="time">{item.time}</span>
//                 <span className={item.attitude === 1 ? 'like liked' : 'like'}>
//                   <i className="icon" />
//                 </span>
//                 <span className="hate hated">
//                   <i className="icon" />
//                 </span>
//                 <span className="reply btn-hover">删除</span>
//               </div>
//             </div>
//           </div>

//           {/* <div className="list-item">
//           <div className="user-face">
//             <img className="user-head" src="./images/avatar.png" alt="" />
//           </div>
//           <div className="comment">
//             <div className="user">西西弗的守望</div>
//             <p className="text">这个视频太好笑了</p>
//             <div className="info">
//               <span className="time">2021-10-08 09:05:00</span>
//               <span className="like liked">
//                 <i className="icon" />
//               </span>
//               <span className="hate hated">
//                 <i className="icon" />
//               </span>
//               <span className="reply btn-hover">删除</span>
//             </div>
//           </div>
//         </div> */}
//         </div>
//       ))}
//     </div>
//   </div>
// )
// 类形式创建组件
class Element extends React.Component {
  // 定义状态
  state = {
    // 定义评论的状态
    content: 'jjjkl',
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot'
      },
      {
        id: 2,
        name: '时间',
        type: 'time'
      }
    ],
    active: 'hot',
    list: [
      {
        id: 1,
        author: '刘德华',
        comment: '给我一杯忘情水',
        time: '2021-10-10 09:09:00',
        img: 'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000',
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1
      },
      {
        id: 2,
        author: '周杰伦',
        comment: '听妈妈的话',
        time: '2021-10-11 09:09:00',
        img: 'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0
      },
      {
        id: 3,
        author: '陈奕迅',
        comment: '十年',
        time: '2021-10-11 10:09:00',
        img: 'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1
      }
    ]
  }
  // 点击高亮显示
  hUpdateActive(type) {
    // 拿到点击之后的type值
    console.log(type)
    this.setState({
      active: type
    })
  }
  changeText = (e) => {
    // 1.拿到文本域的值
    this.setState({
      content: e.target.value
    })
  }
  // 发表评论
  publish = () => {
    // 添加到list里面
    const newList = [
      {
        id: Date.now(),
        author: 'zs',
        comment: this.state.content,
        time: new Date().toString(),
        img: avator,
        attitude: 0
      },
      ...this.state.list
    ]
    this.setState({
      list: newList,
      content: ''
    })
  }
  // 改变态度
  chageATT = (id, attitude) => {
    // alert(id, attitude)
    const newList = this.state.list.map((it) => {
      // 如果点击的那个id和循环的id是同一个 就改变其中的属性attitude
      // 否则就直接返回
      return it.id === id ? { ...it, attitude } : { ...it }
      //   if (it.id === id) {
      //     return { ...it, attitude }
      //   } else {
      //     return { ...it }
      //   }
    })
    this.setState({
      list: newList
    })
  }
  hDel(id) {
    // 当前点击的id和循环的id不一样就去掉
    const newList = this.state.list.filter((it) => it.id !== id)
    this.setState({
      list: newList
    })
  }

  render() {
    const { list, active, tabs } = this.state
    return (
      <div className="App">
          <div className="comment-container">
            {/* 评论数 */}
            <div className="comment-head">
              <span>{list.length} 评论</span>
            </div>
          </div>
      </div>
    )
  }
}
ReactDOM.render(<Element />, document.getElementById('root'))
